import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:oramemo/common/styles/colors.dart';

import 'create_list_logic.dart';
import 'create_list_state.dart';

class CreateListPage extends StatelessWidget {
  const CreateListPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final CreateListLogic logic = Get.put(CreateListLogic());
    final CreateListState state = Get.find<CreateListLogic>().state;

    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          children: [
            _buildHeader(logic, state),
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    _buildMemoirSection(logic, state),
                    SizedBox(height: 20.h),
                    _buildStorySection(logic, state),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildHeader(CreateListLogic logic, CreateListState state) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 16.h),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border(
          bottom: BorderSide(
            color: Colors.grey.shade200,
            width: 1.w,
          ),
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          GestureDetector(
            onTap: () => logic.switchTab(TabType.recording),
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
              child: Text(
                '录音',
                style: TextStyle(
                  fontSize: 18.sp,
                  fontWeight: FontWeight.w500,
                  color: state.currentTab.value == TabType.recording
                      ? Colors.blue
                      : Colors.grey.shade400,
                ),
              ),
            ),
          ),
          SizedBox(width: 40.w),
          GestureDetector(
            onTap: () => logic.switchTab(TabType.creation),
            child: Column(
              children: [
                Text(
                  '创作',
                  style: TextStyle(
                    fontSize: 18.sp,
                    fontWeight: FontWeight.w500,
                    color: state.currentTab.value == TabType.creation
                        ? Colors.blue
                        : Colors.grey.shade400,
                  ),
                ),
                SizedBox(height: 4.h),
                Container(
                  width: 40.w,
                  height: 3.h,
                  decoration: BoxDecoration(
                    color: state.currentTab.value == TabType.creation
                        ? Colors.blue
                        : Colors.transparent,
                    borderRadius: BorderRadius.circular(1.5.r),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildMemoirSection(CreateListLogic logic, CreateListState state) {
    return Column(
      children: [
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Text(
                    '回忆录',
                    style: TextStyle(
                      fontSize: 18.sp,
                      fontWeight: FontWeight.bold,
                      color: Colors.blue,
                    ),
                  ),
                  SizedBox(width: 8.w),
                  Text(
                    '(5)',
                    style: TextStyle(
                      fontSize: 18.sp,
                      fontWeight: FontWeight.bold,
                      color: Colors.blue,
                    ),
                  ),
                  SizedBox(width: 8.w),
                  Icon(
                    Icons.sort,
                    color: Colors.grey.shade600,
                    size: 24.r,
                  ),
                ],
              ),
              GestureDetector(
                onTap: () => logic.addNewMemoir(),
                child: Icon(
                  Icons.add,
                  color: Colors.blue,
                  size: 28.r,
                ),
              ),
            ],
          ),
        ),
        SizedBox(
          height: 250.h,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            padding: EdgeInsets.symmetric(horizontal: 12.w),
            itemCount: state.memoirs.length,
            itemBuilder: (context, index) {
              final memoir = state.memoirs[index];
              return _buildMemoirCard(memoir, logic);
            },
          ),
        ),
      ],
    );
  }

  Widget _buildMemoirCard(Memoir memoir, CreateListLogic logic) {
    return GestureDetector(
      onTap: () => logic.openMemoirDetail(memoir),
      child: Container(
        width: 160.w,
        margin: EdgeInsets.symmetric(horizontal: 4.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: 160.w,
              height: 180.h,
              decoration: BoxDecoration(
                color: Colors.grey.shade300,
                borderRadius: BorderRadius.circular(8.r),
              ),
            ),
            SizedBox(height: 8.h),
            Text(
              memoir.title,
              style: TextStyle(
                fontSize: 14.sp,
                fontWeight: FontWeight.w500,
                color: Colors.black87,
              ),
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            ),
            SizedBox(height: 4.h),
            Row(
              children: [
                Container(
                  width: 20.w,
                  height: 20.h,
                  decoration: BoxDecoration(
                    color: Colors.grey.shade400,
                    shape: BoxShape.circle,
                  ),
                ),
                SizedBox(width: 8.w),
                Icon(
                  Icons.visibility,
                  color: Colors.grey.shade600,
                  size: 16.r,
                ),
                SizedBox(width: 4.w),
                Text(
                  '权限',
                  style: TextStyle(
                    fontSize: 12.sp,
                    color: Colors.grey.shade600,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildStorySection(CreateListLogic logic, CreateListState state) {
    return Column(
      children: [
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Text(
                    '故事',
                    style: TextStyle(
                      fontSize: 18.sp,
                      fontWeight: FontWeight.bold,
                      color: Colors.blue,
                    ),
                  ),
                  SizedBox(width: 8.w),
                  Text(
                    '(10)',
                    style: TextStyle(
                      fontSize: 18.sp,
                      fontWeight: FontWeight.bold,
                      color: Colors.blue,
                    ),
                  ),
                ],
              ),
              GestureDetector(
                onTap: () => logic.addNewStory(),
                child: Icon(
                  Icons.add,
                  color: Colors.blue,
                  size: 28.r,
                ),
              ),
            ],
          ),
        ),
        ListView.separated(
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          itemCount: state.stories.length,
          separatorBuilder: (context, index) => Divider(
            height: 1,
            color: Colors.grey.shade200,
          ),
          itemBuilder: (context, index) {
            final story = state.stories[index];
            return _buildStoryItem(story, logic);
          },
        ),
      ],
    );
  }

  Widget _buildStoryItem(Story story, CreateListLogic logic) {
    return GestureDetector(
      onTap: () => logic.openStoryDetail(story),
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 13.w, vertical: 12.h),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: 109.w,
              height: 100.h,
              decoration: BoxDecoration(
                color: Colors.grey.shade300,
                borderRadius: BorderRadius.circular(8.r),
              ),
            ),
            SizedBox(width: 12.w),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Container(
                        width: 24.w,
                        height: 24.h,
                        decoration: BoxDecoration(
                          color: Colors.grey.shade400,
                          shape: BoxShape.circle,
                        ),
                      ),
                      SizedBox(width: 5.w),
                      Expanded(
                        child: Text(
                          '作者用户名',
                          style: TextStyle(
                            fontSize: 12.sp,
                            color: Colours.darkLightGray,
                          ),
                        ),
                      ),
                      Text(
                        story.date,
                        style: TextStyle(
                          fontSize: 10.sp,
                          color: Colours.darkLightGray,
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 8.h),
                  Text(
                    story.title,
                    style: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w500,
                      color: Colors.black,
                    ),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  SizedBox(height: 8.h),
                  Row(
                    children: [
                      Icon(
                        Icons.chat_bubble_outline,
                        color: Colours.darkLightGray,
                        size: 16.r,
                      ),
                      SizedBox(width: 2.w),
                      Text(
                        'XX',
                        style: TextStyle(
                          fontSize: 12.sp,
                          color: Colours.darkLightGray,
                        ),
                      ),
                      SizedBox(width: 16.w),
                      Icon(
                        Icons.favorite_border,
                        color: Colours.darkLightGray,
                        size: 16.r,
                      ),
                      SizedBox(width: 2.w),
                      Text(
                        'XX',
                        style: TextStyle(
                          fontSize: 12.sp,
                          color: Colours.darkLightGray,
                        ),
                      ),
                      Spacer(),
                      Icon(
                        story.isPrivate ? Icons.visibility_off : Icons.visibility,

                        color: Colours.text,
                        size: 20.r,
                      ),
                      SizedBox(width: 10.w),
                      Text(
                        '权限',
                        style: TextStyle(
                          fontSize: 14.sp,

                          color: Colours.text,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildNavItem(IconData icon, String label, bool isSelected) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(
          icon,
          color: isSelected ? Colors.blue : Colors.grey.shade600,
          size: 24.r,
        ),
        SizedBox(height: 4.h),
        Text(
          label,
          style: TextStyle(
            fontSize: 12.sp,
            color: isSelected ? Colors.blue : Colors.grey.shade600,
          ),
        ),
      ],
    );
  }
} 